<template>
  <div class="container">
    <ActionBar
      @input-change="handleInputChange"
      @search-click="getDepartmentList"
      @insert-click="handleInsertClick"
      @edit-click="handleEditClick"
      @delete-click="handleDeleteClick"
    />
    <Table :tableData="departmentList" :loading="tableLoading" @selection-change="selectionChange" />
    <Diglog
      :title="title"
      :show.sync="dialogVisible"
      :data="department"
      @success="handleActionSuccess"
    />
  </div>
</template>

<script>
import ActionBar from './components/ActionBar'
import Table from './components/Table'
import Diglog from './components/Diglog'
import DepartmentService from '../../../service/department'
import { loadingType } from '../../../common/js/constant'

export default {
  data() {
    return {
      title: '',
      keyword: '',
      department: {},
      departmentList: [],
      dialogVisible: false
    }
  },
  components: {
    ActionBar,
    Table,
    Diglog
  },
  methods: {
    // 获取部门列表
    getDepartmentList() {
      const result = DepartmentService.getDepartmentsByDepartmentName(
        this.keyword
      ).then(res => {
        this.departmentList = res.data
      })
      this.loadingAspect(result, loadingType.TABLE)
    },
    // 处理input改变事件
    handleInputChange(value) {
      this.keyword = value
    },
    // 处理添加按钮点击事件
    handleInsertClick() {
      this.title = '添加部门'
      this.department = null
      this.dialogVisible = true
    },
    // 处理编辑按钮点击事件
    handleEditClick() {
      if (this.selection.length === 0 || this.selection.length > 1) {
        this.$confirm('请选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        this.title = '编辑部门'
        // 深拷贝department防止引用传递
        this.department = JSON.parse(JSON.stringify(this.selection[0]))
        this.dialogVisible = true
      }
    },
    // 处理删除按钮点击事件
    handleDeleteClick() {
      if (this.selection.length < 1) {
        this.$confirm('请至少选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        this.$confirm('您确定删除该部门以及他的子部门？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          let departmentIds = this.recursionDepartmentIds(this.selection)
          DepartmentService.deleteDepartments(departmentIds).then(res => {
            // 提示
            this.$message.success(res.message)
            // 刷新Table
            this.getDepartmentList()
          })
        })
      }
    },
    handleActionSuccess() {
      this.getDepartmentList()
    },
    // 选择项改变触发事件
    selectionChange(selection) {
      this.selection = selection
    },
    // 递归DepartmentIds
    recursionDepartmentIds(arr) {
      let departmentIds = []
      arr.forEach(item => {
        departmentIds.push(item.departmentId)

        if (item.children) {
          departmentIds.push(...this.recursionPermissionIds(item.children))
        }
      })
      return departmentIds
    }
  },
  mounted() {
    this.getDepartmentList()
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  padding 20px
  box-sizing border-box
  .pagination
    margin-top 20px
    text-align right
</style>
